<template>
  <div>
     
      <el-form
      :model="leaseContract"
      label-width="80px"
      class="forma">

    
      <el-row>
          <el-col :span="6">
              <el-form-item label="日期">
                  <el-input type="date" v-model="leaseContract.createDate"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="合同编号">
                  <el-input  v-model="leaseContract.id"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="合同名称">
                  <el-input  v-model="leaseContract.contractName"></el-input>
              </el-form-item>
          </el-col>
            
      </el-row>
      <el-row>
          <el-col :span="6">
              <el-form-item label="所属项目">
                  <el-input  v-model="leaseContract.projectName"   @focus="ProjectName"></el-input>
                   <el-input v-model="leaseContract.pid" ></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="合同金额">
                  <el-input  v-model="leaseContract.contractAmount"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="金额大写">
                  <el-input  v-model="leaseContract.amountUpper"></el-input>
              </el-form-item>
          </el-col>
            <el-col :span="6">
              <el-form-item label="合同类型">
                  <el-input  v-model="leaseContract.contractType"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="6">
              <el-form-item label="开始日期">
                  <el-input type="date" v-model="leaseContract.startDate"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="结束日期">
                  <el-input type="date" v-model="leaseContract.endDate"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="供应商">
                  <el-input  v-model="leaseContract.providerId"></el-input>
              </el-form-item>
          </el-col>
            <el-col :span="6">
              <el-form-item label="结算方式">
                  <el-input  v-model="leaseContract.settleType"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="6">
              <el-form-item label="付款方式">
                  <el-input  v-model="leaseContract.paymentType"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="预付款">
                  <el-input  v-model="leaseContract.advancePay"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="保证金">
                  <el-input  v-model="leaseContract.depositAmount"></el-input>
              </el-form-item>
          </el-col>
        
      </el-row>
      <el-row>
          <el-col :span="6">
              <el-form-item label="签订人">
                  <el-input  v-model="leaseContract.contractSignatory"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="付款条件">
                  <el-input  v-model="leaseContract.payCondition"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="主要条款">
                  <el-input  v-model="leaseContract.mainTerm"></el-input>
              </el-form-item>
          </el-col>
          
      </el-row>
      <el-form-item label="相关文件:" style="width: 700px; height: 80px">
        <!-- 文件上传 -->
        <el-upload
          ref="upload"
          class="upload-demo"
          :limit="1"
          name="multipartFile"
          :action="uploadUrl"
          :data="{ folder: '图片' }"
          multiple
          :headers="headers"
          :auto-upload="false"
          :on-success="success"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
        </el-upload>
      </el-form-item>
      
    </el-form>

    
        <div style="width: 90%;margin: 30px auto">
            <div style="width: 100%;">
                <div style="font-weight: 700;font-size: 20px;display: flex">
                    <div>|租赁合同明细</div>
        <el-button @click="handleAddRow">新增</el-button>
     <el-button @click="onsubmit">立即创建</el-button>
                </div>
            </div>
            <el-divider></el-divider>
            <el-table :data="leaseContractDetail">
                <el-table-column prop="index" v-if="false"></el-table-column>
                <el-table-column prop="mateId" v-if="false"></el-table-column>
                <el-table-column label="物品名称" prop="materialName">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.materialName" readonly
                                  @focus="handleChooseMaterial(scope.row)"></el-input>
                        <el-input v-model="scope.row.materialId" v-if="false"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="规格型号" prop="unitModel">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unitModel" readonly></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="计量单位" prop="unit">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unit" readonly></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="估算数量" prop="count">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.count" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="单价" prop="price">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.price" ></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="计划进场时间" prop="planStartDate">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.planStartDate" type="date"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="计划退场时间" prop="planEndDate">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.planEndDate" type="date"></el-input>
                    </template>
                </el-table-column>
                    <el-table-column label="租赁天数" prop="leaseDays">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.leaseDays"></el-input>
                    </template>
                </el-table-column>
                  <el-table-column label="小计" prop="sumAmount">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sumAmount"  ></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button  type="danger" @click="handleRemoveRow(scope.row)">删行</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
 
  <el-dialog :visible.sync="projectTableVisible">
    
      <project-info-list v-on:row="row" v-if="projectTableVisible"></project-info-list>
       
    </el-dialog>
    <el-dialog :visible.sync="materTableVisible"> 
     <material-list  v-on:checked="checked" ></material-list>
    </el-dialog>
  </div>
  
</template>

<script>

    import leaseContract from '../../model/hyh/LeaseaContract'
    const lc=new leaseContract()
  
import ProjectInfoList from '../common/projectInfo/ProjectInfoList.vue';
import MaterialList from '../common/material/MaterialList.vue';
export default {
  components: { ProjectInfoList, MaterialList },
    data() {
        return {
       
        headers: { token: sessionStorage.getItem("token") },
        uploadUrl: "http://localhost/upload",
         username: { realName: sessionStorage.getItem("realName")},
        leaseContract:{
            id:'',
        },
        
        leaseContractDetail:[],
        projectTableVisible:false,
        materTableVisible:false,
        currentIndex: ''
           
        }
    },
    methods:{
          handleRemoveRow(row) {
                this.leaseContractDetail.splice(row.index, 1)
            },
             handleChooseMaterial(row) {
                this.currentIndex = row.index
                this.materTableVisible = true
            },
            checked(checked){
        this.leaseContractDetail=false
        this.leaseContractDetail=checked
      
        console.log(this.leaseContractDetail)
       },

         row(row){
                this.projectTableVisible=false
                this.leaseContract.projectName=row.projectName
                this.leaseContract.pid=row.id
                console.log(this.leaseContract.pId)
            },
      //查询项目信息
    ProjectName() { 
       
      this.projectTableVisible = true;
    },
         success(response) {
      //上传成功之后返回的钩子
      this.leaseContract.attachIds = response;
    },
 
    del(index) {
      this.leaseContractDetail.splice(index, 1);
    },
    submitUpload() {
      //上传服务器
      this.$refs.upload.submit();
      console.log("发送文件..");
    },
    
              handleAddRow() {
                this.leaseContractDetail.push({
                    unit: '',
                    unitModel:'',
                    count:'',
                    price: '',
                    planStartDate: '',
                    planEndDate:'',
                    leaseDays: '',
                    sumAmount: '',
                    materialName:''
                    
                    
                })
            },
            onsubmit(){
                lc.saveLeaseContract(this.leaseContract,this.leaseContractDetail).then(()=>{

                })
                console.log(this.leaseContract)
            console.log(this.leaseContractDetail)
            },
            //查询最大合同id编号
            getMaxid(){
            lc.getMaxid().then((respoonse)=>{
 
                this.leaseContract.id=respoonse.data.data
                console.log( this.leaseContract.id)
            })
            }

    },
    created(){
        this.getMaxid()
        this.leaseContract.contractSignatory=this.username.realName
        console.log(this.leaseContract.contractSignatory)
    }

}
</script>

<style>

</style>